<template>
  <div style="padding-top:2rem;padding-bottom:2rem;font-size:0.4rem;">
    <div>
      <TopNav title="RobotPage.ytg" show_left="true"></TopNav>
      <div style="padding:0.2rem 0.5rem;">
        <dl class="help">
          <dt>{{ $t('RobotPage.fwsm') }}</dt>
          <dd>{{ $t('RobotPage.ktfwxy') }}99{{ $t('RobotPage.jbmycrsx') }}</dd>
          <dd>{{ $t('RobotPage.sxzhwxkhjrw') }}</dd>
          <dd>{{ $t('RobotPage.ytgjqrjycrlckshzdwcrw') }}</dd>
          <dd>{{ $t('RobotPage.yhzzsbdzqsddtsy') }}</dd>
        </dl>
        <ul v-if="user && user.is_ygj && user.ygj_info">
          <li>{{ $t('RobotPage.sxrq') }}: {{user.ygj_info.effected_at}}</li>
          <li>{{ $t('RobotPage.dqrq') }}: {{user.ygj_info.expired_at}}</li>
        </ul>
<!--        <div v-if="user && user.is_ygj && user.ygj_info">-->
<!--          <div style="border:thin solid #ccc;border-radius: 0.2rem;padding:0.3rem;margin-top:0.3rem;">-->
<!--            <van-field v-model="dy_user" placeholder="$t('RobotPage.qsr')" label="$t('RobotPage.dyzh')：" />-->
<!--            <van-field v-model="dy_pwd" placeholder="$t('RobotPage.qsr')" label="$t('RobotPage.dymm')：" />-->
<!--          </div>-->
<!--          <div style="color:red;margin-top:10px;">{{ $t('RobotPage.qlrdyxx') }},{{ $t('RobotPage.fzjqrwfgz') }}!</div>-->
<!--          <button :disabled="loading"  @click="handleClickSave" class="btn">{{ $t('RobotPage.bc') }}</button>-->
<!--        </div>-->
        <div v-else>
          <button :disabled="loading"  @click="handleClickGoVipZoom" class="btn">{{ $t('RobotPage.kt') }}</button>
        </div>
      </div>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";

import Vue from 'vue';
import { Field } from 'vant';
import 'vant/lib/dialog/style';

Vue.use(Field);

export default {
  name: 'BindAccountPage',
    components: {
      MainNav,
      TopNav,
    },
    data () {
    return {
        loading:false,
        user:{},
        dy_user:'',
        dy_pwd:'',
    }
  },
    methods:{
      getUser(){
          let loading = this.$toast.loading();
          this.$axios.get(this.$api_url.user).then((res)=>{
              this.user = res.data;
              if(this.user.ygj_info){
                  this.dy_user = this.user.ygj_info.dy_user;
                  this.dy_pwd = this.user.ygj_info.dy_pwd;
              }
          }).catch((err)=>{
              this.$toast.fail(err.message)
          }).then(()=>{
              loading.hide();
          })
      },
      handleClickSave(){
          if(!this.dy_user || !this.dy_pwd){
              this.$toast.fail(this.$t('RobotPage.qsrdyxx'));
              return;
          }
          this.loading = true
          let loading = this.$toast.loading();
          this.$axios.post(this.$api_url.ygj_dy,this.$qs.stringify({
              dy_user: this.dy_user,
              dy_pwd: this.dy_pwd
          })).then((res)=>{
              if(res.data.code == 0){
                  this.$toast.success(res.data.msg);
              } else{
                  this.$toast.fail(res.data.msg);
              }
          }).catch((err)=>{
              this.$toast.fail(err.message);
          }).then(()=>{
              loading.hide();
              this.loading = false;
          })
      },
      handleClickGoVipZoom(){
          this.$dialog2.confirm({
              title: this.$t('RobotPage.wts'),
              message: '确认消费99金币开通服务吗?',
          })
          .then(() => {
              // on confirm
              this.loading = true
              let loading = this.$toast.loading();
              this.$axios.post(this.$api_url.buy_ygj,this.$qs.stringify({
                  id:1
              })).then((res)=>{
                  if(res.data.code == 0){
                      this.$toast.success(res.data.data);
                      setTimeout(()=>{
                          location.href='/#/robot2';
                      },1000);
                  } else{
                      this.$toast.fail(res.data.msg);
                  }
              }).catch((err)=>{
                  this.$toast.fail(err.message);
              }).then(()=>{
                  loading.hide();
                  this.loading = false;
              })
          })
          .catch(() => {
              // on cancel
          });
      },

    },
    mounted() {
      this.getUser();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body{
    background-color: transparent;
  }
  #app{
    margin-top:0;
  }
  .help dt{
    font-size: 0.6rem;
  }
  .help dd{
    margin: 0.2rem;
    text-align: left;
  }
  button{
    width: 100%;
    font-size: .4rem;
    line-height: .986667rem;
    color: #fff;
    text-align: center;
    border-radius: .08rem;
    background-color: #2f3848;
    margin-top: .48rem;
  }

</style>
